<template>
    <div class="common-container">
        <!-- <div class="header">
        <div class="header_left">

         
        </div>
      </div> -->
        <div class="content">
            <el-table :data="tableData" height="calc(100% - 65px)" :header-cell-style="headerStyle" class="table">
                <el-table-column label="序号" type="index" width="50" align="center">
                </el-table-column>
                <el-table-column prop="userName" label="用户账号" align="center" show-overflow-tooltip>
                </el-table-column>
                <el-table-column prop="device" label="产品类型" align="center" show-overflow-tooltip>
                    <template slot-scope="scope">
                        <el-tag v-if="scope.row.device == 'PC'" type="success">平台</el-tag>
                        <el-tag v-else type="warning">小程序</el-tag>
                    </template>
                </el-table-column>

                <el-table-column prop="success" label="登录状态" align="center" show-overflow-tooltip>
                    <template slot-scope="scope">
                        <el-tag v-if="scope.row.success == 1" type="danger">失败</el-tag>
                        <el-tag v-else type="success">成功</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="ipaddr" label="登录IP地址" align="center" show-overflow-tooltip>
                </el-table-column>
                <el-table-column prop="loginLocation" label="登录地点" align="center" show-overflow-tooltip>
                </el-table-column>
                <el-table-column prop="browser" label="浏览器类型" align="center" show-overflow-tooltip>
                </el-table-column>
                <el-table-column prop="os" label="操作系统" align="center" show-overflow-tooltip>
                </el-table-column>

                <el-table-column prop="msg" label="操作信息" align="center" show-overflow-tooltip></el-table-column>
                <el-table-column prop="loginTime" label="登录时间" align="center" min-width="120" show-overflow-tooltip>
                </el-table-column>
            </el-table>

            <pagination :total="total" :page.sync="page" :limit.sync="limit" @pagination="LoginLog" class="pagination" />

        </div>
    </div>
</template>

<script>
import tableStyleMixin from "@mixin/table-style";
import Pagination from "@components/Pagination.vue";
import {
    reqLoginLog,
} from "@/api/api";
import { mapState } from "vuex";

export default {
    components: {
        Pagination
    },
    mixins: [tableStyleMixin],
    data() {
        return {
            tableData: [],
            page: 1,
            limit: 10,
            total: 0,
        }
    },
    computed: {
        ...mapState(["user"]),
    },
    watch: {},
    methods: {
        // 获取登录日志
        async LoginLog() {
            let res = await reqLoginLog(this.page, this.limit, {
                userId: this.user.userId,
            });
            if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
            //   console.log(res);
            this.tableData = res.data.rows;
            this.total = res.data.total || 0;
        },
    },
    created() {
        this.LoginLog()
    },
    mounted() {

    },
}
</script>

<style lang='less' scoped>
@import url("~@views/style/tablePage.less");

.common-container {
    display: block !important;

    .content {
        height: 100%;
    }
}
</style>